<template>
  <ul class="nav-tabs">
    <li
      class="nav-tab-item fc"
      :class="{ 'active-tab': active == item.value }"
      v-for="(item, index) in tabs"
      :key="index"
      @click="handleCheck(item)"
    >
      {{ item.label }}
    </li>
  </ul>
</template>

<script setup lang="ts">
const activeTab = ref(0);
const props = defineProps<{
  tabs: any[];
}>();

const active = defineModel();
const handleCheck = (item) => {
  active.value = item.value;
};
</script>

<style scoped lang="scss">
.nav-tabs {
  display: flex;
  align-items: center;
  gap: 1px;
  .nav-tab-item {
    flex: 1;
    height: 34px;
    background-color: rgba(32, 49, 64, 1);
    &:hover {
      cursor: pointer;
    }
  }
  .active-tab {
    background: #0000 url("@/assets/imgs/tab-active.webp") no-repeat;
    background-size: cover;
  }
}
</style>
